<template>
	<view class="pt60">
		<view class="rjhhbjsde row cen">
			<view class="col cf fz32" v-for="(sd,idx) in jhhghye" :key="idx">
				<view class="pr f_b jhhbnjhhde" :class="idxsd==idx?'act':''" @tap="qiuanhgs(idx,sd.type)">
					{{sd.name}}
					<text class="kkjhbnjhbdr" v-if="sd.number>0">{{sd.number}}</text>
				</view>
			</view>
		</view>

		<view class="mt80">
			<!-- 缺省页--前端效果 -->
			<view class="dfsgdgtxer" v-if="isdata==false">
					<image src="../../static/img/qs/xiaoxi.png" class="xijannerrt"  mode="widthFix"></image>
					<view class="mt20 fz28 z9 ">
						暂无消息
					</view>
			</view>
			<uni-swipe-action v-if="isdata ==true && lists.length>0">
				<uni-swipe-action-item :options="options1" @tap="bindClick" class=" kkmxeeerrttbb" v-for="(sd,idx) in 20" :key="idx">
					<navigator url="details" class="pt40 pm40 pd row w100">
						<view class="jhgbjhgbgdr yj">
							<image src="../../static/img/information/dsfdsa.png" class="jjhggww cz" mode="widthFix"></image>
						</view>
						<view class="col pl30 row">
							<view class="col">
								<view class="cf fz32">
									安防预警
								</view>
								<view class="mt20 cf fz24 dian">
									您的爱车您的爱车您的爱车您的...
								</view>
							</view>
							<view class="z9 fz24 pl20">
								<text class="yj jhbbhxeert"></text> 13:00
							</view>
						</view>
					</navigator>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
</template>
<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		data() {
			return {
				idxsd: 0,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#1689D5'
					}
				}],
				jhhghye: [{
					name: '预警',
					number: 0,
					type:4
				}, {
					name: '体检',
					number: 0,
					type:3
				}, {
					name: '提示',
					number: 0,
					type:1
				}, {
					name: '系统',
					number: 0,
					type:2
				}],
				lists:[],
				isdata:false
			}
		},
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		methods: {
			qiuanhgs(idx,type) {
				this.idxsd = idx
				this.getinfo(type)
			},
			bindClick() {
				uni.showToast({
					title: "删除成功！"
				})
			},
			async getinfo(type){
				let params={}
				console.log(type);
				if(type == 1 || type==2){
					let shcar=await this.get("/api/notice/form/"+type)
					console.log(shcar);
				}
				
				
				// if(shcar.code==0){
					
				// }
			},
		},
		onNavigationBarButtonTap() {
			uni.showActionSheet({
				itemList:['全部标记为已读','批量删除']
			})
		},
		mounted() {}
	}
</script>
<style scoped>
	.rjhhbjsde {
		width: 580upx;
		margin: auto;
	}

	.kkjhbnjhbdr {
		width: 46upx;
		height: 28upx;
		line-height: 28upx;
		font-size: 26upx;
		background: rgba(252, 90, 90, 1);
		border-radius: 16upx;
		position: absolute;
		right: -46upx;
		top: -10upx;
	}

	.jhhbnjhhde.act::after {
		content: ' ';
		position: absolute;
		width: 100%;
		height: 6upx;
		background-color: #1689D5;
		left: 0;
		bottom: 0;
		margin: auto;
		bottom: -20upx;
		border-radius: 20%;
	}

	.jhgbjhgbgdr {
		width: 90upx;
		height: 90upx;
		background-color: #fff;
		text-align: center;
		line-height: 90upx;
	}

	.jjhggww {
		width: 52upx;
	}

	.jhbbhxeert {
		display: inline-block;
		width: 16upx;
		height: 16upx;
		background: rgba(252, 90, 90, 1);
		border-radius: 50%;
		margin-right: 20upx;
	}
	
	
</style>
